<template>
  <div style="
    width:90%;
    height: 100%;">
    <span style="position: relative;left: -488px;top: 17px;"> 语种：</span>
    <el-breadcrumb separator="|" style="padding-left: 120px">
      <el-breadcrumb-item>全部</el-breadcrumb-item>
      <el-breadcrumb-item>华语</el-breadcrumb-item>
      <el-breadcrumb-item>韩国</el-breadcrumb-item>
      <el-breadcrumb-item>欧美</el-breadcrumb-item>
      <el-breadcrumb-item>日本</el-breadcrumb-item>
      <el-breadcrumb-item>其他</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <span style="position: relative;left: -488px;top: 17px;"> 分类：</span>
    <el-breadcrumb separator="|"  style="padding-left: 120px">
      <el-breadcrumb-item>全部</el-breadcrumb-item>
      <el-breadcrumb-item>男歌手</el-breadcrumb-item>
      <el-breadcrumb-item>女歌手</el-breadcrumb-item>
      <el-breadcrumb-item>乐队组合</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-table
        :data="musicList"
        stripe
        style="width: 90%; margin: 0 auto">
      <el-table-column
          label="序号"
          type="index"
          width="200px">
      </el-table-column>
      <el-table-column
          prop="songname"
          label="歌名">
        <template slot-scope="scope">
          <i class="el-icon-star-off"></i>
          {{scope.row.songname}}
        </template>
      </el-table-column>
      <el-table-column
          prop="singer"
          label="歌手">
      </el-table-column>
      <el-table-column
          width="200px"
          prop="address">
        <template slot-scope="scope">
          <i class="el-icon-video-play" style="font-size: 25px"></i>
          {{scope.row.scope}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "singer",
  data() {
    return {
      musicList: []
    }
  },
  created() {
    this.$axios.get('/api/adminup/upmusicList').then(res => {
      console.log(res.data.data)
      if (res.data.data != null && res.data.data.length > 0) {
        this.musicList = res.data.data;
      }

    })
  },
}
</script>

<style scoped>

</style>